<template>
	<view class="content flex-c">
		<u-swiper
			:list="banner"
			keyName="image"
			showTitle
			height="130"
			:autoplay="false"
			@click="handleBanner"
			autoplay
			circular
		></u-swiper>
		<view class="m16 bgWhite box">
			<view class="flex-r jsb ver-c p16">
				<view class="fb f1" style="font-size: 36rpx; position: relative">
					<!-- 老朋友推荐 -->
					<picker @change="bindPickerChange" :range="deptList" range-key="label" :value="index">
						<view class="picker">{{ deptList[index] ? deptList[index].label : '临沂市' }}</view>
						<view style="position: absolute; right: 0; top: 0"><u-icon name="arrow-down"></u-icon></view>
					</picker>
				</view>
			</view>
			<view class="ml16 mr16"><u-line></u-line></view>
			<view class="m16 flex-r ver-c">
				<slot>
					<view class="flex-r ver-c" @click="show = true">
						<text class="gray fs14" style="padding-right: 10rpx">{{ seachLabel }}</text>
						<u-icon name="arrow-down" size="13"></u-icon>
					</view>
				</slot>
				<u-search
					:clearabled="true"
					:showAction="false"
					bgColor="#fff"
					v-model="keyword"
					@search="searchs"
					@custom="searchs"
					searchIconColor="#F9AE3D"
				></u-search>
				<view class="mt16"><u-line></u-line></view>
			</view>
			<view class="ml16 mr16">
				<u-button
					text="检索"
					color="#F9AE3D"
					customStyle="border-radius:20rpx;box-shadow: #ffe1bc 0 8rpx 26rpx 0"
					@click="searchs"
				></u-button>
			</view>
		</view>

		<view class="ml16 mr16">
			<template v-if="searchList.length > 0">
				<view class="flex-r ver-c jsb">
					<view class="fb">最近搜索</view>
					<u-icon name="trash-fill" size="26px" @tap="delhistory()"></u-icon>
				</view>
				<view class="flex-r wrap mb16 mt16">
					<text class="seachtext ellipsis" v-for="item of searchList" @tap="toGoods(item.tBrowsecontent)">
						{{ item.tBrowsecontent }}
					</text>
				</view>
			</template>

			<view class="fb">热门搜索</view>
			<view class="flex-r mt16 wrap">
				<view class="li flex-r" v-for="(item, index) of hotList" :key="index" @tap="toGoods(item)">
					<text class="pr16 fb" :class="{ hot: index < 4 }">
						{{ index + 1 }}
					</text>
					<text class="ellipsis">{{ item }}</text>
				</view>
			</view>
		</view>

		<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="show = false"></u-picker>

		<!-- <view @click="handletab">测试</view> -->
	</view>
</template>

<script>
import Utils from '@/utils/utils.js'
import { ImgIP } from '@/utils/comm.js'
import { getBanner } from '@/api/index.js'
import { getdeptList } from '@/api/login'
import { getHistory, removeHistory } from '@/api/goods'
export default {
	data() {
		return {
			banner: [
				{
					image: 'https://www.helloimg.com/i/2025/03/18/67d8dd1c71f28.png',
					title: '商户1',
					id: 1
				},
				{
					image: 'https://www.helloimg.com/i/2025/03/18/67d8dd1c71f28.png',
					title: '商户2',
					id: 2
				}
			],
			show: false,
			seachLabel: '商品',
			columns: [['商品', '商户']],
			deptList: [],
			tDeptid: 0, // 0 查临沂市
			index: -1, // 初始化为 -1 表示没有选择
			keyword: '',
			tLongitude: '',
			tLatitude: '',
			searchList: [],
			hotList: ['轴承滑车', '千斤顶', '玻璃胶', '小推车', '手拉小车', '工具']
		}
	},
	onReady() {},
	onLoad() {},

	onShow() {
		//this.searchList = JSON.parse(uni.getStorageSync('searchList') || '[]')
		console.log('搜索历史：', this.searchList)
		let tMemberid = Utils.getUserInfo().tMemberid
		if (tMemberid) {
			getHistory(tMemberid).then((res) => {
				console.log(res)
				this.searchList = res.historyList
			})
		}
		this.getBanner()
		//获取市场
		this.getdept()
	},
	methods: {
		getdept() {
			getdeptList().then((res) => {
				console.log(res)
				const transformedArray = res.deptList.map((item) => ({
					label: item.deptName, // 将 deptName 作为 label
					value: item.deptId // 将 deptId 作为 value，并转换为字符串（如果需要）
				}))
				this.deptList = [{ label: '临沂市', value: 0 }, ...transformedArray]
				// 默认选中第一个市场
				//this.index = 0
				//this.tDeptid = this.deptList[0].value
				//console.log('用户选择了:', this.tDeptid)
			})
		},
		bindPickerChange(e) {
			const selectedIndex = e.detail.value
			this.index = selectedIndex
			// 确认选择后，将对应的 value 赋值给 tDeptid
			this.tDeptid = this.deptList[selectedIndex].value
			//console.log('用户选择了:', this.tDeptid)
		},
		confirm(e) {
			console.log('confirm', e.value[0])
			this.seachLabel = e.value[0]
			this.show = false
		},
		getBanner() {
			getBanner().then((res) => {
				console.log('banner-->', res)
				if (res.code == 200) {
					let baner = res.merchantList.map((item) => {
						return {
							image: ImgIP + item.tMerchantimg,
							title: item.tMerchantname,
							id: item.tMerchantid
						}
					})
					this.banner = baner
					//console.log(this.banner)
				}
			})
		},
		handleBanner(index) {
			console.log(this.banner[index].id)
			uni.navigateTo({
				url: `/pages_C/goodList/goodList?tMerchantid=${this.banner[index].id}`
			})
		},
		searchs() {
			if (this.keyword == '') {
				uni.$u.toast('搜索内容不能为空')
			} else {
				// if (this.searchList.includes(this.keyword)) {
				// 	let i = this.searchList.indexOf(this.keyword)
				// 	this.searchList.splice(i, 1)
				// 	this.searchList.unshift(this.keyword)
				// } else {
				// 	this.searchList.unshift(this.keyword)
				// 	uni.setStorageSync('searchList', JSON.stringify(this.searchList))
				// }
				if (this.seachLabel == '商品') {
					uni.navigateTo({
						url: `/pages_C/goodList/goodList?keyword=${this.keyword}&deptId=${this.tDeptid}`
					})
				} else {
					uni.navigateTo({
						url: `/pages_C/shopList/shopList?keyword=${this.keyword}`
					})
				}
			}
		},
		delhistory() {
			Utils.showModel(`你确定要清空搜索记录吗`).then(
				() => {
					const rescounts = this.searchList.map((item) => item.tHistoryid)
					let ids = rescounts.join(',')
					removeHistory(ids).then((res) => {
						console.log(res)
						if (res.code == 200) {
							uni.$u.toast('搜索记录已清空')
							this.searchList = []
						}
					})
				},
				(err) => {
					console.log(err)
					console.log('取消')
				}
			)
		},
		toGoods(item) {
			uni.navigateTo({
				url: `/pages_C/goodList/goodList?keyword=${item}&deptId=${this.tDeptid}`
			})
		},
		handletab() {
			uni.navigateTo({
				url: `/pages_C/goodList/scanGoodList?tMerchantid=59`
			})
		}
	}
}
</script>

<style lang="stylus" scoped>
.content
	min-height 100%
	background #F2F3F3
.box
	padding-bottom 32rpx
	border-radius 30rpx
.li
	width 50%
	line-height 60rpx
	color #4C4C4D
	text:first-child
		color #A5A5A5
	.hot
		color #F55858 !important
.seachtext
	border-radius 80rpx
	background #fff
	padding 20rpx 50rpx
	margin-right 20rpx
	margin-bottom 20rpx
	border 1px solid #efefef
	overflow hidden
	white-space nowrap
	text-overflow ellipsis
.ellipsis
	-webkit-line-clamp 1
	display -webkit-box
	-webkit-box-orient vertical
	overflow hidden
	text-overflow ellipsis
</style>
